<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>아이디 중복검사을 DWR을 이용해서 구현하기</title>

<!-- 클라이언트 페이지에서 DWR을 사용하기 위해서 반드시 정의해주어야 하는 외부자바스크립트
           파일구문.  
     *** dwr/interface/dwr.xml파일에서 만드는 자바스크립트파일명      -->
<script type="text/javascript" src="dwr/interface/IdChecker.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript">
  
   function idCheck(){
	   var id = document.test.id.value;
	   //아이디 텍스트 필드에 들어온 값을 id라는 변수에 넣음
	   IdChecker.idcheck(id, resultDisplay);
	   // DWR을 이용해서 서버에 있는 IdChecker라는 클래스의 idcheck()메서드
	   // 호출함. 
	   // 매개변수 id: 실제 메서드의 매개변수, 
	   // 매개변수 resultDisplay: 메서드 실행결과를 넘겨받아서 자바스크립트내에서
	   //                       실행되어지는 콜백함수명
   }

   function resultDisplay(checkresult){
	   // DWR에 의해 서버의 idcheck()메서드의 실행결과값이 checkresult매개변수로 
	   // 입력되고 호출되어진다.
	   if(checkresult == "success"){
		    document.getElementById("resultview02").style.display='none';
		    document.getElementById("resultview01").style.display='';
		    // HTML DOM : HTML문서에서 resultview01이라는 id를 가지는 객체를 
		    // 반환받고 그 객체의 style속성의 display속성에 값을 세팅함.
	   }else if(checkresult == "fail"){
		    document.getElementById("resultview01").style.display='none';
		    document.getElementById("resultview02").style.display='';
	   }

	   IdChecker.test("테스트", testResult);
   }

   function testResult(msg){
	   alert(msg);
   }

   function makeBean(){
	   var name = document.test.name.value;
	   var age = document.test.age.value;
	   IdChecker.beanTest(name,age, beanResult);
   }

   function beanResult(personInfo){
	   document.write("서버를 거쳐온 결과값~이름:"+personInfo.name+",나이:"+personInfo.age);
   }
   
   
</script>

</head>
<body>
    <h5>아이디 중복검사을 DWR을 이용해서 구현하기</h5>
    <table>
        <form name="test">
        <tr>
            <td>아이디</td>
            <td> <input type="text" name="id" /> </td>
            <td> <input type="button" value="중복검사" onclick="idCheck()"/> </td>
            <td>                
                <span id="resultview01" style="{display:none}" >
                                            사용가능한 아이디입니다..       
                </span>
                <span id="resultview02" style="{display:none}" >
                                            중복되는 아이디가 있습니다..       
                </span>
            </td>
        </tr> 
        
        <tr>
            <td>이름</td>
            <td> <input type="text" name="name" /> </td>
        </tr>
        <tr>
            <td>나이</td>
            <td> <input type="text" name="age"/></td>
            <td> <input type="button" value="빈만들기" onclick="makeBean()"/></td>
        </tr>           
      </form>
    </table>
</body>
</html>


